<template>
	<view>
		<!-- 一行两列商品展示 -->
		<view class="goods-list" v-if="type == 'twoColumns'">
			<view v-for="(item, index) in res" :key="index" class="goods-item" @click="navigateToDetailPage(item)">
				<view class="image-wrapper">
					<u-image :src="item.thumbnail" width="100%" height='345rpx' mode="aspectFill">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<div v-if="showtime"
						style="position: absolute;bottom: 5px;right: 5px;color: #fff;font-size: 12px;background: #000;border-radius: 2px;padding: 1px 6px;">
						{{ timeCompute(item.createTime) }}
					</div>
					<img v-if="item.goodsVideo"
						src=""
						style="width: 50rpx; height: 50rpx; position: absolute; bottom: 24rpx; left: 24rpx;">
				</view>
				<view class="goods-detail">
					<div class="title clamp">
						<text class="ant-tag" v-if="item.storeGoodsType &&item.storeGoodsType.includes('现货')">现货</text>
						<text class="ant-tag ant-active"
							v-if="item.storeGoodsType &&item.storeGoodsType.includes('精品')">精品</text>
						<text class="ant-tag" v-if="item.storeGoodsType &&item.storeGoodsType.includes('爆品')">爆品</text>
						<text class="ant-tag ant-active"
							v-if="item.storeGoodsType &&item.storeGoodsType.includes('新品')">新品</text>
						{{item.goodsName}}
					</div>
					<view class="price-box">
						<div class="price" v-if="item.price!=undefined">
							¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }}
							</span>.{{$options.filters.goodsFormatPrice(item.price )[1]}}
						</div>
						<view class="goods-tag">
							<view v-if="item.tag && item.tag.includes('合')" class="tab-item">合</view>
							<view v-if="item.tag && item.tag.includes('代')" class="tab-item tab-active">代</view>
							<view v-if="item.tag && item.tag.includes('退')" class="tab-item">退</view>
							<view v-if="item.tag && item.tag.includes('换')" class="tab-item tab-active">换</view>
						</view>
					</view>
					<!-- <div class="promotion" @click="navigateToDetailPage(item)">
						<div v-if="item.salesModel == 'WHOLESALE'">
							<span>批</span>
						</div>
						<div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
							<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
							<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
							<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
						</div>
					</div> -->
					<!-- <div class="count-config" @click="navigateToDetailPage(item)">
						<span>已售 {{ item.buyCount || "0" }}</span>
						<span>{{ item.commentNum || "0" }}条评论</span>
					</div> -->
					<div class="store-seller-name" v-if="storeName">
						<div class="flexsb-list" style="background: #C19C55;" v-if="item.gold == '1'">金</div>
						<div class="flexsb-list" style="background: #27b885;">保</div>
						<div class="flexsb-list">合</div>
						<div class="text-hidden">
							<!-- <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
								text="自营" type="error" /> -->
							<span>{{ item.storeName || "暂无" }}</span>
						</div>
						<!-- <span>
							<u-icon name="arrow-right"></u-icon>
						</span> -->
					</div>
				</view>
			</view>
		</view>
		<!-- 一行一列商品展示 -->
		<div v-if="type == 'oneColumns'" class="goods-one-row">
			<div v-for="(item, index) in res" :key="index" class="goods-row">
				<div class="flex goods-col">
					<div class="goods-img" @click="navigateToDetailPage(item)">
						<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx"
							:src="item.thumbnail">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</div>
					<div class="goods-detail">
						<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
						<view class="price-box" @click="navigateToDetailPage(item)">
							<div class="price" v-if="item.price!=undefined">
								¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{
			            $options.filters.goodsFormatPrice(item.price )[1]
			          }}
							</div>
						</view>
						<!-- <div class="promotion" @click="navigateToDetailPage(item)">
							<div v-if="item.salesModel == 'WHOLESALE'">
								<span>批</span>
							</div>
							<div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
								<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
								<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
								<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
							</div>
						</div> -->
						<!-- <div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
							<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
							<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
						</div> -->
						<div style="overflow: hidden;margin-top: 23rpx;" @click="navigateToStoreDetailPage(item)"
							class="count-config">
							<div class="text-hidden" style="display: flex;align-items: center;width: 100%;"
								v-if="storeName">
								<!-- <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
									text="自营" type="error" /> -->
								<span class="line1-store-name">{{ item.storeName }}</span>
								<span class="to-store" style="margin-left: auto;">进店<u-icon size="24" name="arrow-right"
										color="#666"></u-icon>
								</span>
							</div>
							<!-- <span>
								<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
							</span> -->
						</div>
					</div>
				</div>

			</div>
		</div>

	</view>
</template>

<script>
	import commonTpl from '@/components/m-goods-list/common'
	export default {
		data() {
			return {
				lightColor: this.$mainColor
			}
		},
		mixins: [commonTpl],

		props: {
			// 遍历的数据
			res: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 一行两列还是一行一列显示
			type: {
				type: String,
				default: 'twoColumns',
				validator() {
					return ['twoColumns', 'oneColumns']
				}
			},
			storeName: {
				type: Boolean,
				default: true
			},
			showtime: {
				type: Boolean,
				default: false
			},
			keyword: {
				type: null,
				default: ''
			}

		},
		watch: {
			keyword(val) {
				if (val) {
					this.lightSearchStr(val)
				}
			}
		},
		methods: {
			timeCompute(timestamp) {
				const publishTime = timestamp; // 发布时间的Date对象
				const currentTime = new Date(); // 当前时间的Date对象
				// console.log(publishTime, currentTime.getTime());
				const timeDiff = currentTime.getTime() - publishTime; // 时间差（毫秒）
				// const minutesDiff = Math.floor(timeDiff / 60000); // 时间差（分钟）
				const hoursDiff = timeDiff / 3600000; // 时间差（小时）的小数形式
				const hours = Math.floor(hoursDiff); // 完整的小时数
				const minutes = Math.floor((hoursDiff - hours) * 60); // 剩余的分钟数
				// console.log(`相差 ${hours} 小时 ${minutes} 分钟`); // 输出结果
				if (hours > 0) {
					return `${hours}小时前发布`;
				} else if (minutes < 1) {
					return "刚刚发布";
				} else {
					return `${minutes}分钟前发布`;
				}
			},

			// 高亮显示搜索内容	
			lightSearchStr(keyword, str) {
				if (!keyword) {
					return str
				} else {
					let unicodes = '';
					for (let i of Array.from(keyword)) {
						unicodes += this.unicode(i) + "|"
					}
					const rule = '(' + unicodes + ')'
					const reg = new RegExp(rule, 'gi');
					return str ? str.replace(reg, matchValue =>
						`<span style="color:${this.lightColor}">${matchValue}</span>`
					) : ''
				}
			},
			//  转换为unicode
			unicode(str) {
				var value = '';
				for (var i = 0; i < str.length; i++) {
					value += '\\u' + this.left_zero_4(parseInt(str.charCodeAt(i)).toString(16));
				}
				return value;
			},
			left_zero_4(str) {
				if (str != null && str != '' && str != 'undefined') {
					if (str.length == 2) {
						return '00' + str;
					}
				}
				return str;
			},
			// 数据去重一下 只显示一次 减免 劵 什么的
			getPromotion(item) {
				if (item ? item.promotionMap : item.promotionMap) {
					const fieldList = item ? item.promotionMap : item.promotionMap
					let array = [];
					Object.keys(fieldList).forEach((child) => {
						if (!array.includes(child.split("-")[0])) {
							array.push(child.split("-")[0]);
						}
					});
					return array;
				}
			},
			// 跳转到商品详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
				});
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.storeId}`,
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	.goods-one-row {
		/* padding-bottom: 250rpx; */
	}

	.flexsb-list {
		width: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		font-size: 20rpx !important;
		margin-right: 8rpx;
		background: #ff3c2a;

	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		/* margin: 10rpx 20rpx 0rpx; */
		width: 100%;
		margin-top: 20rpx;

		>.goods-item {
			background-color: #ffffff;
			display: flex;
			border-radius: 16rpx;
			flex-direction: column;
			/* width: calc(50% - 30rpx); */
			width: 345rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			/* &:nth-child(2n + 1) {
				margin-right: 20rpx;
			} */

			.image-wrapper {
				width: 100%;
				height: 345rpx;
				border-radius: 16rpx 16rpx 0 0;
				overflow: hidden;
				padding: 0;
				position: relative;
			}
		}

		.count-config,
		.store-seller-name {
			font-size: $font-sm;
			margin-top: 10rpx;
		}

		.text-hidden {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.ant-tag {
		margin-right: 5rpx;
		padding: 2rpx 5rpx;
		border-radius: 6rpx;
		font-size: 20rpx;
		background-color: #ff3c2a;
		color: #fff;
	}

	.ant-active {
		background: #27b885;
	}

	.goods-tag {
		display: flex;
		align-items: center;
	}

	.tab-item {
		font-size: 20rpx;
		border: 0.5px solid #ff3c2a;
		color: #ff3c2a;
		padding: 0 5rpx;
		margin-left: 5rpx;
		border-radius: 2rpx;
	}

	.tab-active {
		border: 0.5px solid #27b885;
		color: #27b885;
	}

	.goods-row {
		background: #fff;
		padding: 16rpx;

		>.goods-col {
			display: flex;

			>.goods-img {
				overflow: hidden;
				flex: 4;
			}

			>.goods-detail {
				flex: 7;
			}
		}
	}

	.goods-detail {
		margin: 0 20rpx;

		>.title {
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 1.5;
			height: 86rpx;
			padding: 10rpx 0 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.promotion {
			margin-top: 4rpx;
			display: flex;

			div {
				span {
					font-size: 24rpx;
					color: $light-color;
					margin-right: 10rpx;
					padding: 0 4rpx;
					border-radius: 2rpx;
				}
			}
		}

		.store-seller-name {
			color: #666;
			overflow: hidden;
			display: flex;
			/* justify-content: space-between; */
		}

		.count-config {
			padding: 5rpx 0;
			color: #666;
			display: flex;
			font-size: 24rpx;
			justify-content: space-between;
		}

		>.price-box {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
			font-size: 24rpx;
			color: $font-color-light;

			>.price {
				font-size: 26rpx;
				line-height: 1;
				color: $main-color;
				font-weight: bold;

				/deep/ span:nth-of-type(1) {
					font-size: 38rpx;
				}
			}
		}
	}
</style>